<template>
    <div>
        <Row style="padding: 0px 10px 5px">
            <Col span="24">
            <h3 style="padding: 3px;">直播列表</h3>
            </Col>
            <hr style="margin: 30px -10px 0px;">
        </Row>

        <Row style="padding: 5px 20px 5px">
            <Col span="24">
            <Select v-model="params.typeId" placeholder="直播类别" style="width:150px" @on-change="resetType">
                <Option v-for="type in liveTypes" :value="type.liveTypeId" :key="type.liveTypeId">{{type.typeName}}

                </Option>
            </Select>
            <Select v-model="params.state" placeholder="直播状态" style="width:150px" @on-change="resetState">
                <Option value="0">未开播</Option>
                <Option value="1">直播中</Option>
                <Option value="2">直播结束</Option>
            </Select>

            <Select v-model="params.order" placeholder="排序方式" style="width:150px" @on-change="resetOrder">
                <Option value="create_time">直播创建时间</Option>
                <Option value="event_start_time">直播开始时间</Option>
            </Select>

            <Button type="ghost" @click="resetAll">重置</Button>
            <span style="float: right">
                    <Input v-model="params.title" placeholder="请输入标题" style="width: 250px" @on-enter="search"></Input>
                    <Button type="primary" shape="circle" icon="ios-search" @click="search"></Button>
                </span>

            </Col>

        </Row>

        <Row style="padding: 0px 20px 20px; min-height: 250px" :gutter="16">
            <div v-if="events.length == 0" style="text-align: center; margin-top: 120px">
                暂无直播数据

            </div>
            <Col span="6" style="margin-top: 14px;" v-for="item in events" v-bind:key="item.index">
            <Card style="height: 220px;min-width: 260px">
                    <span class="card-status" v-bind:class="{'living':item.liveStatus ==1,
                    'not-started':item.liveStatus == 0,'end':item.liveStatus == 2}">
                        {{item.liveStatus | liveState}}
                    </span>
                    <span class="delete" v-if="item.liveStatus == 2">
                        <Icon type="eye"></Icon>{{item.onlineVisitedNum + item.replayVisitedNum}}</span>
                    </span>
                <div>
                    <img  @click="goConfig(item.liveRoomId)"
                         style="cursor: pointer; height: 145px;width: 100%" :src="item.livePoster">
                    <p class="" style="white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">
                        {{item.eventTitle}}
                        </p>

                    <time style="font-size: 12px">{{item.eventStartTime}}</time>
                    <!--<span style="margin-left: 10px" v-if="item.liveStatus == 2">
                            <Icon type="eye"></Icon>{{item.eventVisitedNum}}</span>-->
                    <span style="float: right">
                            <Button type="error" size="small"
                                @click="deleteRoom(item.liveRoomId)">删除</Button>
                            <Button v-if="item.liveStatus == 0" type="primary" size="small"
                                    @click="goConfig(item.liveRoomId)">设置</Button>
                            <Button v-if="item.liveStatus == 1" type="primary" size="small"
                                    @click="view(item.liveRoomId)">观看</Button>
                            <Button v-if="item.liveStatus == 2" type="primary" size="small"
                                    @click="view(item.liveRoomId)">回看</Button>
                        </span>
                </div>

            </Card>
            </Col>
        </Row>
        <Row style="padding: 20px">
            <Page style="float: right" :total="page.total" :page-size="params.limit" :current="page.currentPage"
                  @on-change="goPage"></Page>
        </Row>
    </div>
</template>
<script>
    import {getOrgLiveList, getLiveTypes ,deleteLiveRoom} from '../../api/api'
    import $ from 'jquery'
    export default {
        filters: {
            liveState: function (code) {
                if (code == 0) {
                    return "未开播"
                }
                if (code == 1) {
                    return "直播中"
                }
                if (code == 2) {
                    return "结束"
                }
            }
        },
        data(){
            return {
                showDelete:false,
                orgId: this.$store.state.orgId,
                liveTypes: [],
                page: {
                    total: null,
                    totalPage: null,
                    currentPage: 1,

                },
                onlineNumbers: 488,
                events: [
                    //{liveStatus:2,livePoster:"http://img06.tooopen.com/images/20170111/tooopen_sy_196617693418.jpg",eventTitle:'标题',eventStartTime:'2017-08-9 22:22:00'}
                ],
                params: {
                    page: 1,
                    limit: 8,
                    title: null,
                    order: 'create_time',
                    sidx: 'desc',
                    state: null,
                    typeId: null,
                    userId: ''
                }
            }
        },
        methods: {
            deleteRoom(liveRoomId){
                this.$Modal.confirm({
                    title: '删除直播间',
                    content: '<p>直播间删除后不可恢复，所有相关视频都将被删除</p>',
                    onOk: () => {
                        let liveRoomIds = []
                        liveRoomIds.push(liveRoomId)
                        deleteLiveRoom(liveRoomIds).then(res =>{
                            if (res.code ==0 ){
                                this.$Message.info('删除成功！');
                                this.getList()
                            }
                        })
                    },
                    onCancel: () => {

                    }
                });

            },
            view(liveRoomId){
                var url = "http://www.jackhoo.cn/live/" + liveRoomId
                window.open(url)
            },
            goConfig(liveRoomId){
                //设置操作直播间id
                this.$store.dispatch('SetLiveRoomId', liveRoomId)
                //跳转到详细设置页面
                this.$router.push('/room_config')
            },
            goPage(page){
                this.params.page = page
                this.getList()
            },
            getList(){
                getOrgLiveList(this.orgId, this.params).then(res => {
                    this.events = res.page.list
                    this.page.totalPage = res.page.totalPage
                    this.page.total = res.page.totalCount
                    this.page.currentPage = res.page.currPage
                })
            },
            resetOrder(value){
                this.params.order = value
                this.params.page = 1
                this.getList()
            },
            resetState(value){
                this.params.state = value
                this.params.page = 1
                this.getList()
            },
            resetType(value){
                this.params.typeId = value
                this.params.page = 1
                this.getList()
            },
            search(){
                if (!this.params.title) {
                    return false
                }
                this.params.page = 1
                this.getList()
            },
            resetAll(){
                this.params = {
                    page: 1,
                    limit: 8,
                    title: null,
                    order: 'create_time',
                    sidx: 'desc',
                    state: null,
                    typeId: null,
                    userId: this.$route.params.userId
                }
                this.getList()
            },
            setLiveTypes(){
                getLiveTypes(this.orgId).then(response => {
                    this.liveTypes = response.types
                })
            }

        },
        mounted: function () {
            this.params.userId = this.$route.params.userid
            this.getList()
            this.setLiveTypes()
            $(".live-card").on('click',
                function () {
                }
            );
        }
    }
</script>
<style scoped>
    .card-status {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 2px 4px;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
    }

    .delete {
        float: right;
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 2px 4px;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        background-color: #495060;
    }

    .end {
        background-color: gray;
    }

    .living {
        background-color: #2b85e4;
    }

    .not-started {
        background-color: #f90;
    }
</style>
